<template>
  <div>
    <nav class="navbar">
      <div class="pro-sel">
        <el-dropdown
          @command="selectProject"
          trigger="click"
        >
          <span class="el-dropdown-link">
            {{currentProject.label}}<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item
              v-for="item in projects"
              v-bind:key="item.value"
              :command="item"
            >{{item.label}}</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </nav>
    <div class="card-scene">
      <Container
        orientation="horizontal"
        @drop="onColumnDrop($event)"
        drag-handle-selector=".column-drag-handle"
        @drag-start="dragStart"
      >
        <Draggable
          v-for="column in scene.children"
          :key="column.id"
        >
          <div :class="column.props.className">
            <div class="card-column-header">
              <span class="column-drag-handle">&#x2630;</span>
              {{ column.name }}
            </div>
            <Container
              group-name="col"
              @drop="(e) => onCardDrop(column.id, e)"
              @drag-start="(e) => log('drag start', e)"
              @drag-end="(e) => log('drag end', e)"
              :get-child-payload="getCardPayload(column.id)"
              drag-class="card-ghost"
              drop-class="card-ghost-drop"
            >
              <Draggable
                v-for="card in column.children"
                :key="card.id"
              >
                <div
                  :class="card.props.className"
                  :style="card.props.style"
                >
                  <div class="edit-and-delete">
                    <span
                      class="tm-icon-brush"
                      @click="(e) => openEdit(card.data, e)"
                    ></span>
                    <span
                      class="tm-icon-trash"
                      @click="(e) => del(card.data, e)"
                    ></span>
                  </div>
                  <p>{{ card.data.taskname }}</p>
                </div>
              </Draggable>
              <a
                class="new-card"
                href=""
              >添加卡片...</a>
            </Container>
          </div>
        </Draggable>
      </Container>
    </div>
    <el-dialog
      title="任务编辑"
      fullscreen="true"
      :visible.sync="editVisible"
    >
      <el-form label-position="top" :model="form" :rules="rules" ref="form" :close-on-click-modal="false" :close-on-press-escape="false">
        <el-form-item label="任务名称" prop="taskname">
          <el-input v-model="form.taskname"></el-input>
        </el-form-item>
        <el-form-item label="所属项目">
          <el-select v-model="form.projectid" placeholder="请选择">
            <el-option v-for="item in projects" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="负责人" prop="fzr">
          <el-input v-model="form.fzr"></el-input>
        </el-form-item>
        <el-form-item label="任务计划时间" prop="description">
          <el-date-picker v-model="form.plantime" type="daterange" align="right" unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="任务描述" prop="description">
          <mavon-editor :subfield="false" defaultOpen="edit" placeholder="添加描述..." :toolbars="toolbars" v-model="form.description"></mavon-editor>
        </el-form-item>
        <el-form-item label="相关附件">
          <el-upload class="upload-demo" action="" :on-preview="handlePreview" :on-remove="handleRemove" :before-remove="beforeRemove" multiple :limit="3" :on-exceed="handleExceed" :file-list="fileList">
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
          </el-upload>
        </el-form-item>
      </el-form>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="editVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="editVisible = false"
        >确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import '@/assets/css/dnd.css'
import { Container, Draggable } from 'vue-smooth-dnd'
import { applyDrag, generateItems } from '@/utils/helpers'
import MavonEditor from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'

const columnNames = ['待办中', '进行中', '已完成', '已验收']
const tasks = [
  {
    taskname:
      '测试任务1测试任务1测试任务1测试任务1测试任务1测试任务1测试任务1测试任务1测试任务1测试任务1测试任务1测试任测试任务1测试任务1测试任务1测试任测试任务1测试任务1测试任务1测试任',
    projectname: '测试项目1',
    fzr: '张三',
    status: '待办中'
  },
  {
    taskname: '测试任务2',
    projectname: '测试项目1',
    fzr: '张三',
    status: '进行中'
  },
  {
    taskname: '测试任务3',
    projectname: '测试项目1',
    fzr: '张三',
    status: '已完成'
  },
  {
    taskname: '测试任务4',
    projectname: '测试项目1',
    fzr: '张三',
    status: '已验收'
  }
]

const scene = {
  type: 'container',
  props: {
    orientation: 'horizontal'
  },
  children: generateItems(4, i => ({
    id: `column${i}`,
    value: columnNames[i],
    type: 'container',
    name: columnNames[i],
    props: {
      orientation: 'vertical',
      className: 'card-container'
    },
    children: (function () {
      const result = []
      for (let j = 0; j < tasks.length; j++) {
        if (tasks[j].status === columnNames[i]) {
          result.push({
            type: 'draggable',
            id: tasks[j].taskname,
            props: {
              className: 'card'
            },
            data: tasks[j]
          })
        }
      }
      return result
    })()
  }))
}
export default {
  name: 'Cards',
  components: { Container, Draggable, MavonEditor: MavonEditor.mavonEditor },
  data () {
    return {
      toolbars: {
        bold: true, // 粗体
        italic: true, // 斜体
        header: true, // 标题
        underline: true, // 下划线
        strikethrough: true, // 中划线
        mark: true, // 标记
        superscript: true, // 上角标
        subscript: true, // 下角标
        quote: true, // 引用
        ol: true, // 有序列表
        ul: true, // 无序列表
        link: true, // 链接
        imagelink: true, // 图片链接
        code: true, // code
        table: true, // 表格
        subfield: true, // 是否需要分栏
        fullscreen: true, // 全屏编辑
        readmodel: false, // 沉浸式阅读
        htmlcode: false, // 展示html源码
        help: true // 帮助
      },
      form: {
        taskname: '测试任务3',
        projectname: '测试项目1',
        fzr: '张三',
        status: '已完成'
      },
      editVisible: false,
      scene,
      currentProject: {
        label: '项目1',
        value: '1'
      },
      rules: {
        taskname: [
          {
            required: true,
            message: '请输入项目名称',
            trigger: 'blur'
          }
        ],
        fzr: [
          {
            required: true,
            message: '请输入负责人',
            trigger: 'blur'
          }
        ]
      },
      projects: [
        {
          label: '项目1',
          value: '1'
        },
        {
          label: '项目2',
          value: '2'
        },
        {
          label: '项目3',
          value: '3'
        },
        {
          label: '项目4',
          value: '4'
        }
      ],
      fileList: []
    }
  },
  methods: {
    onColumnDrop (dropResult) {
      const scene = Object.assign({}, this.scene)
      scene.children = applyDrag(scene.children, dropResult)
      this.scene = scene
    },
    onCardDrop (columnId, dropResult) {
      if (dropResult.removedIndex !== null || dropResult.addedIndex !== null) {
        const scene = Object.assign({}, this.scene)
        const column = scene.children.filter(p => p.id === columnId)[0]
        const columnIndex = scene.children.indexOf(column)
        const newColumn = Object.assign({}, column)
        newColumn.children = applyDrag(newColumn.children, dropResult)
        scene.children.splice(columnIndex, 1, newColumn)
        this.scene = scene
      }
    },
    getCardPayload (columnId) {
      return index => {
        return this.scene.children.filter(p => p.id === columnId)[0].children[ index ]
      }
    },
    dragStart () {
      console.log('drag started')
    },
    log (...params) {
      console.log(...params)
    },
    selectProject (command) {
      this.currentProject = command
    },
    openEdit (data, e) {
      this.editVisible = true
    },
    del (data, e) {
      this.$confirm('此操作将永久删除该任务, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
        .catch(() => {})
    },
    handlePreview () {
    },
    handleRemove () {},
    beforeRemove () {},
    handleExceed () {}
  }
}
</script>

<style lang="stylus" scoped>
.card {
  position: relative;

  .edit-and-delete {
    display: none;
  }

  &:hover {
    .edit-and-delete {
      font-size: 0;
      display: block;
      position: absolute;
      padding: 2px;
      top: 0;
      right: 0;

      span {
        cursor: pointer;
        display: inline-block;
        margin: 0 2px;
        vertical-align: top;

        &:hover {
          font-size: 19px;
        }
      }
    }
  }
}

.new-card {
  padding-left: 5px;
  margin-top: 10px;
  display: block;
  font-size: 1.1em;
  color: #555;

  &:hover {
    text-decoration: underline;
  }
}

.navbar {
  min-height: 30px;

  .pro-sel {
    margin-left: 5px;
  }
}
</style>
